<template>
  <div class="outside-hospital-receivable-info">
    <el-container class="receivable-box-info">
      <!-- 基础信息 -->
      <h3>订单信息</h3>
      <el-header height="auto">
        <div class="formToptext">
          <el-form
            :inline="true"
            :model="dataList"
            label-width="92px">
            <el-form-item
              v-for="(item,index) in detailForm"
              :key="index"
              :label="item.title">
              <div class="textBox">{{ dataList[item.key] }}</div>
            </el-form-item>
          </el-form>
        </div>
      </el-header>
      <!-- 收款记录表格 -->
      <h3>收款信息</h3>
      <el-editable
        class="cost-list"
        v-loading="tableLoading"
        height="200"
        :data="payableCostLits"
        :columns="payableCostColumns"
      />
      <h3>产品明细</h3>
      <el-editable
        class="info-list"
        v-loading="tableLoading"
        height="400"
        ref="editable"
        :data="dataContList"
        :columns="payableReadColumns"
      />
      <!-- 收款 -->
      <el-dialog
        title="财务收款"
        :visible.sync="isShowreceivable"
        width="500px"
        @close="handleClose">
        <div class="dialog-box">
          <p>医院名称：{{ dataList.purchaserComanyName || '--' }}</p>
          <div>
            <p>应收总金额：{{ dataList.settleMoney || 0 }}</p>
            <p>剩余收款金额：{{ surplusAmount || 0 }}</p>
          </div>
          <p>
            <span>本次收款：</span>
            <el-input
              v-model="amountCollected"
              placeholder="请输入"
              class="ipt" />
          </p>
        </div>

        <span
          slot="footer"
          class="dialog-footer">
          <el-button @click="handleClose">
            <i class="el-icon-circle-close"/>
            取 消</el-button>
          <el-button
            type="primary"
            @click="toReceivables">
            <i class="el-icon-circle-check"/>
            确 定</el-button>
        </span>
      </el-dialog>
    </el-container>
  </div>
</template>
<script>
import { payableReadColumns, payableCostColumns, detailForm } from './const.js'
import { receivableDetail, receivableMoney } from '@const/beforeSettleApi'
import paginationMixin from '@mixins/paginationMixin'
import { hasIn, cloneDeep } from 'lodash'
import ElEditable from '@components/el-editable/index.vue'
export default {
  components: {
    ElEditable
  },
  data () {
    return {
      isShowreceivable: false,
      isDisabled: false,
      detailForm, // 订单名字字段
      dataList: {}, // 订单信息
      payableCostColumns, // 收款明细表头
      payableCostLits: [], // 收款明细
      payableReadColumns, // 产品明细表头
      dataContList: [], // 产品明细
      tableLoading: false,
      surplusAmount: '', // 剩余金额
      amountCollected: '' // 收款金额
    }
  },
  created () {
    this.getData()
  },
  methods: {
    // 收款
    toReceivables () {
      if (!this.amountCollected) {
        this.$message({
          message: '请输入收款金额！',
          type: 'warning'
        })
        return false
      }
      let url = receivableMoney
      this.$axios
        .$get(url, {
          params: {
            receiptOrderId: this.$route.query.id,
            receiptMoney: this.amountCollected
          }
        })
        .then(res => {
          if (res.code === '0') {
            this.$message({
              message: '添加成功',
              type: 'success'
            })
            this.getData()
            this.isShowreceivable = false
          }
        })
        .finally(res => {})
    },
    // 取消
    handleClose () {
      this.isShowreceivable = false
      this.amountCollected = ''
    },
    // 获取列表数据
    getData () {
      this.tableLoading = true
      let url = receivableDetail
      this.$axios
        .$get(url, {
          params: {
            receiptOrderId: this.$route.query.id
          }
        })
        .then(res => {
          // 订单信息
          this.dataList = hasIn(res, 'payload.orderDetail')
            ? res.payload.orderDetail
            : {}
          if (this.dataList.receiptStatus !== 0) {
            this.dataList.receiptStatus = '已收款'
          } else {
            this.dataList.receiptStatus = '待收款'
          }
          // 收款信息
          this.payableCostLits = hasIn(res, 'payload.receiptRecordList')
            ? res.payload.receiptRecordList
            : []
          if (this.payableCostLits.length) {
            let leng = this.payableCostLits.length - 1
            this.surplusAmount = this.payableCostLits[leng].leftReceiptMoney
            if (this.surplusAmount <= 0) {
              this.isDisabled = true
            }
          } else {
            this.surplusAmount = this.dataList.settleMoney
          }
          // 产品明细
          this.dataContList = hasIn(res, 'payload.orderItemList')
            ? res.payload.orderItemList
            : []
        })
        .finally(res => {
          this.tableLoading = false
          this.initNavButtons()
        })
    },
    goBack () {
      this.$router.go(-1)
    },
    toReceivable () {
      this.isShowreceivable = true
    },
    // 初始化 导航栏 按钮组
    initNavButtons () {
      let obj = {
        type: 'btn',
        arr: [
          {
            val: '返回',
            handle: this.goBack
          },
          {
            val: '收款',
            type: 'primary',
            disabled: this.isDisabled,
            handle: this.toReceivable
          }
        ]
      }
      this.$store.commit('changeLayoutHandle', obj)
    }
  }
}
</script>
<style lang="less" scoped>
.outside-hospital-receivable-info {
  .receivable-box-info {
    height: 100%;
    overflow: auto;

    .textBox {
      width: 300px;
    }

    h3 {
      line-height: 40px;
    }

    .dialog-box {
      width: 400px;
      margin: 0 auto;

      p {
        line-height: 50px;
        display: flex;
        align-items: center;
      }

      div {
        display: flex;
        justify-content: space-between;
      }

      .ipt {
        width: 200px;
      }
    }
  }
}
</style>
